<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<style>
    #aftersaleDetail {
        padding: 0 20px;
        color: #444;
        background: #fff;
        font-size: 13px;
        font-weight: 500;
    }

    .el-steps {
        min-width: 600px;
    }

    .el-step__icon {
        width: 32px;
        height: 32px;
        border-color: #fff;
        background: #ccc;
    }
    .el-step__icon.is-text{
        border: 4px solid;
    }

    .el-step__head.is-success {
        color: #7438D5;
        border-color: #fff;
    }

    .el-step__head.is-success .el-step__icon.is-text {
        background: #7438D5;
        color: #fff;
    }

    .el-step__title,
    .el-step__title.is-process {
        color: #999;
        font-size: 14px;
        font-weight: 500;
    }

    .el-step__head.is-process .el-step__icon.is-text,
    .el-step__head.is-wait .el-step__icon.is-text {
        border-color: #fff;
        background: #eee;
        color: #fff;
    }

    .el-step__title.is-success {
        color: #444;
    }

    .el-step.is-horizontal .el-step__line {
        top: 14px;
        background: #ccc;
    }

    .display-flex {
        display: flex;
        align-items: center;
    }

    .common-btn {
        width: 98px;
        height: 36px;
        background: #7438D5;
        border-radius: 4px;
        justify-content: center;
        cursor: pointer;
        color: #fff;
    }

    .color-7438D5 {
        color: #7438D5;
    }

    .color-F8A92B {
        color: #F8A92B;
    }

    .color-FF5959 {
        color: #FF5959;
    }

    .color-999 {
        color: #999;
    }

    .custom-header {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
    }

    .custom-steps {
        /* height: 600px; */
        /* border: 1px solid #E6E6E6; */
    }

    .custom-steps-left {
        padding: 20px 60px 0 26px;
        border: 1px solid #E6E6E6;
        height: 100%;
        margin-bottom: 20px;
    }

    .left-title {
        font-weight: 600;
        font-size: 16px;
    }

    .left-goods {
        justify-content: space-between;
        padding: 20px 0 10px;
        border-bottom: 1px dashed #E6E6E6;
        align-items: flex-start;
    }

    .goods-img {
        width: 70px;
        height: 70px;
        margin-right: 12px;
    }

    .goods-msg {
        width: 224px;
    }

    .goods-msg>div {
        margin-bottom: 5px;
    }

    .goods-price>div {
        text-align: right;
    }

    .aftersale-status {
        padding: 20px 24px 10px;
        border-bottom: 1px dashed #E6E6E6;
    }

    .aftersale-msg {
        padding: 20px 20px 10px;
    }

    .aftersale-status>div,
    .aftersale-msg>div {
        margin-bottom: 11px;
    }

    .custom-steps-msg {
        height: 140px;
        justify-content: center;
        border: 1px solid #E6E6E6;
    }

    .custom-afterasle-operation {
        padding: 40px 0 40px 50px;
        border: 1px solid #E6E6E6;
        border-top: none;
        margin-bottom: 20px;
    }

    .refuse-btn {
        margin: 0 30px;
        background: #fff;
        border: 1px solid #7438D5;
        color: #7438D5;
    }

    .finish-btn {
        background: #fff;
    }

    .operation-title {
        margin-bottom: 10px;
        color: #333;
        font-weight: 600;
        font-size: 20px;
    }

    .operation-title i {
        font-size: 30px;
        margin-right: 18px;
    }

    .operation-tip {
        padding-left: 48px;
        font-size: 14px;
        margin-bottom: 40px;
    }

    .operation-btn {
        padding-left: 48px;
        margin-bottom: 82px;
    }

    .tips {
        margin-bottom: 18px;
        padding-left: 48px;
    }

    .tips-1 {
        margin-bottom: 14px;
        padding-left: 48px;
    }

    .tips-2 {
        padding-left: 48px;
    }

    .custom-afterasle-record {
        padding: 24px 30px 20px 26px;
        border: 1px solid #E6E6E6;
    }

    .afterasle-record-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 18px;
        justify-content: space-between;
    }

    .click-reply {
        font-size: 13px;
        cursor: pointer;
    }

    .afterasle-record-container {
        padding-left: 20px;
    }

    .record-title-container {
        margin-bottom: 12px;
    }

    .record-title {
        margin-right: 60px;

    }

    .record-reason,
    .record-describe {
        margin-bottom: 10px;
    }

    .el-dialog {
        max-width: 800px;
        border-radius: 6px;
    }

    .el-dialog .el-input__inner {
        height: 34px;
        line-height: 34px;
    }

    .el-dialog__title {
        font-size: 14px;
        color: #666;
    }

    .el-dialog__body {
        padding: 0 20px 30px;
        font-size: 13px;
    }

    .dialog-item {
        margin-bottom: 20px;
        line-height: 30px;
        flex-wrap: wrap;
        padding: 0 10px;
    }

    .dialog-item-tip {
        /* width: 90px; */
        text-align: center;
        margin-right: 20px;
    }

    .dialog-item-container {
        width: 382px;
        margin-right: 20px;
    }

    .dialog-footer {
        margin-top: 20px;
        justify-content: flex-end;
    }

    .cancel-btn {
        width: 88px;
        background: #fff;
        color: #7438D5;
        margin-right: 20px;
    }

    .define-btn {
        width: 88px;
    }
    .goods-image-box{
        flex-wrap: wrap;
    }

    .goods-images {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        position: relative;
        border: 1px solid #7438D5;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .label-auto {
        width: 100%;
        height: 100%;
    }

    .del-image-btn {
        position: absolute;
        width: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 600;
        background: #7438D5;
        color: #fff;
        top: -7px;
        right: -7px;
    }

    .add-img {
        width: 60px;
        height: 60px;
        border: 1px dashed #E6E6E6;
        border-radius: 4px;
        justify-content: center;
        margin-bottom: 10px;
    }
    .record-images{
        margin-bottom: 20px;
    }

    .record-images img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    .el-step__line-inner {
        border-color: #ccc;
    }

    .el-step__head.is-success .el-step__line-inner {
        border-color: #7438D5;
    }

    .el-step__line-inner,
    .el-step__description.is-success {
        color: #999;
    }
    .el-textarea{
        flex: 1;
    }
    .select-container{
        flex-wrap: wrap;
        flex: 1;
    }

    @media (max-width: 992px) {
        .custom-steps-right {
            margin-top: 20px;
        }
    }


    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div id="aftersaleDetail" v-cloak>
    <div class="custom-container">
        <div class="custom-steps">
            <el-row :gutter="20" type="flex" style="align-items: stretch;flex-wrap: wrap;">
                <el-col :xs="24" :sm="24" :md="12" :lg="9" :xl="8">
                    <div class="custom-steps-left">
                        <div class="left-title">售后信息</div>
                        <div class="left-goods display-flex">
                            <div class="display-flex">
                                <div class="goods-img" v-if="detailData.goods_image">
                                    <img class="label-auto" :src="Fast.api.cdnurl(detailData.goods_image)" />
                                </div>
                                <div class="goods-msg">
                                    <div>{{detailData.goods_title}}</div>
                                    <div>规格：{{detailData.goods_sku_text}}</div>
                                </div>
                            </div>
                            <div class="goods-price">
                                <div class="color-FF5959">￥{{detailData.goods_price}}</div>
                                <div><span style="margin-right: 6px;">x</span>{{detailData.goods_num}}</div>
                            </div>
                        </div>
                        <div class="aftersale-status">
                            <div>售后类型：<span class="color-F8A92B">{{detailData.type_text}}</span></div>
                            <div>退款金额：<span class="color-F8A92B">{{detailData.refund_fee}}</span>元</div>
                            <div>售后单号：{{detailData.aftersale_sn}}</div>
                            <div>申请时间：{{moment(detailData.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}</div>
                        </div>
                        <div class="aftersale-msg">
                            <div v-if="orderData">订单编号：{{orderData.order_sn}}</div>
                            <div v-if="detailData.user">用户信息：{{detailData.user.nickname}}</div>
                            <div v-if="detailData.user">联系方式：{{detailData.phone}}</div>
                            <div>物流状态：{{detailData.dispatch_status_text}}</div>
                            <div>运费金额：{{detailData.dispatch_fee}} 元</div>
                            <div>优惠金额：{{detailData.discount_fee}} 元</div>
                            <div>实付金额：<span v-if="orderData" class="color-FF5959">{{orderData.pay_fee}}</span>元</div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="15" :xl="16">
                    <div class="custom-steps-right">
                        <div class="custom-steps-msg display-flex">
                            <el-steps :active="stepActive" align-center finish-status="success">
                                <el-step title="买家申请售后"
                                    :description="stepActive>=1?moment(detailData.createtime*1000).format('YYYY-MM-DD HH:mm:ss'):''">
                                </el-step>
                                <el-step title="售后申请处理中"
                                    :description="(stepActive>=2)?(detailLogs.length>=2?moment(detailLogs[detailLogs.length-2].updatetime*1000).format('YYYY-MM-DD HH:mm:ss'):moment(detailData.updatetime*1000).format('YYYY-MM-DD HH:mm:ss')):''">
                                </el-step>
                                <el-step :title="detailData.aftersale_status_text"
                                    :description="stepActive==3?moment(detailData.updatetime*1000).format('YYYY-MM-DD HH:mm:ss'):''">
                                </el-step>
                            </el-steps>
                        </div>
                        <div class="custom-afterasle-operation">
                            <div class="operation-title display-flex">
                                <i class="el-icon-warning-outline color-7438D5"></i>
                                <div>{{detailData.aftersale_status_text}}</div>
                            </div>
                            <div class="operation-tip">
                                {{detailData.aftersale_status_desc}}
                            </div>
                           <div class="operation-btn display-flex"
                                v-if="detailData.aftersale_status==0 || detailData.aftersale_status==1">
                                <div class="common-btn agree-btn display-flex"
                                    @click="operationfunc('agree-refund','dialog')">同意退款
                                </div>
                                <div class="common-btn refuse-btn display-flex"
                                    @click="operationfunc('reject-refund','dialog')">拒绝申请</div>
                                <div class="common-btn finish-btn display-flex color-7438D5"
                                    @click="operationfunc(null,'finish-aftersale')">售后完成</div>
                            </div>
                            <div class="color-F8A92B tips">温馨提示：</div>
                            <div class="color-999 tips-1">1、如果同意申请，请发送正确的退货地址给买家。</div>
                            <div class="color-999 tips-2">2、如果拒绝申请，请发送给买家拒绝理由。</div>
                        </div>
                        <div class="custom-afterasle-record">
                            <div class="afterasle-record-title display-flex">
                                <div>售后记录</div>
                                <div class="color-7438D5 click-reply" @click="operationfunc('reply-msg','dialog')">点击回复
                                </div>
                            </div>
                            <div class="afterasle-record-container" v-for="item in detailLogs">
                                <div class="display-flex record-title-container">
                                    <div class="record-title">{{item.reason}}</div>
                                    <div class="color-999">
                                        {{moment(item.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}</div>
                                </div>

                                <div class="record-reason color-999" v-html="item.content"> </div>
                                <div class="record-images">
                                    <img v-for="it in item.images_arr" :src="Fast.api.cdnurl(it)" />
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
    <!-- 退款 -->
    <el-dialog class="refund-box" :title="dialogName" width="50%" :visible.sync="refundDialog"
        :before-close="operationfunc">
        <div>
            <!-- 退款 -->
            <div class="dialog-item display-flex" v-if="refundType=='agree-refund'"
                style="flex-wrap: wrap;line-height:30px">
                <div class="dialog-item-tip">退款金额：</div>
                <div class="dialog-item-container">
                    <el-input  v-if="orderData" v-model="refundMoney" :placeholder="'最多可以退'+orderData.pay_fee+'元'"></el-input>
                    <el-input  v-if="!orderData" v-model="refundMoney" placeholder="请输入退款金额"></el-input>
                </div>
                <div class="color-999">退款时请与买家协商好，退款之后不可撤回</div>
            </div>
            <!-- 拒绝退款 -->
            <div class="dialog-item display-flex" v-if="refundType=='reject-refund'">
                <div class="dialog-item-tip">拒绝理由：</div>
                <el-input v-model="refuseReason" placeholder="请输入拒绝理由"></el-input>
            </div>
            <!-- 回复 -->
            <div class="dialog-item display-flex" v-if="refundType=='reply-msg'">
                <div class="dialog-item-tip">回复内容：</div>
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入回复内容"
                    v-model="replyMsg">
                </el-input>
            </div>
            <div class="dialog-item display-flex" v-if="refundType=='reply-msg'" style="align-items: flex-start;">
                <div class="dialog-item-tip">选择图片：</div>
                <div class="display-flex select-container">
                    <div class="goods-image-box display-flex">
                        <div class="goods-images" v-for="(it,index) in replyImages">
                            <img class="label-auto" :src="Fast.api.cdnurl(it)" style="border-radius: 4px;">
                            <div class="del-image-btn" @click="delImg(index)">
                                <img class="label-auto" src="/assets/addons/shopro/img/goods/close.png">
                            </div>
                        </div>
                        <div v-if="replyImages.length<5" class="add-img display-flex" @click="addImg()" style="margin-right: 30px;">
                            <i class="el-icon-plus"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dialog-footer display-flex">
                <div class="common-btn cancel-btn display-flex" @click="operationfunc">取消</div>
                <div class="common-btn define-btn display-flex" @click="operationfunc('yes')">确认</div>
            </div>
        </div>
    </el-dialog>
</div>